<template name="components">
	<view>
		<u-navbar :is-back="false" :border-bottom="false" title="装修众销平台"></u-navbar>
		<view class="slot-wrap">
			<view class="wrap_l1">
				<u-search placeholder="大家都在搜  赚佣金" bg-color="#f1f5f8" :clearabled="false" :show-action="false" input-align="center" @search="search_news"></u-search>
			</view>
			<view class="wrap_l2" @click="goqd()">
				<text>每日签到</text>
				<u-icon name="chat" color="#07172e" size="36"></u-icon>
			</view>
		</view>
		<scroll-view scroll-y class="page" :style="{height:this.screenHeight+'px'} ">
			<view class="content">
				<view class="wrap-banner">
					<bw-swiper :swiperList="swiperList" :autoplay="true" style="width:100%"></bw-swiper>
				</view>
				<view class="row_card">
					<view class="row_title">我与平台</view>
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item,index) in elements" :key="index" @click="goNav(item.name)">
							<image :src="item.image" mode="widthFix" class="nav_icon"></image>
							<view class="grid-text">{{item.title}}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="head_hr"></view>
				<view class="row_card">
					<view class="row_title">快速赚钱</view>
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item,index) in elements1" :key="index" @click="goNav(item.name)">
							<image :src="item.image" mode="widthFix" class="nav_icon"></image>
							<view class="grid-text">{{item.title}}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="head_hr"></view>
				<view class="row_card">
					<!--  <view class="more">更多<u-icon name="arrow-right"></u-icon></view> -->
					<view class="row_title" style="margin-top:10rpx; padding-top: 20rpx;">
						<view>新闻中心</view>
						<view class="more" @click="golistnews">更多 <u-icon name="arrow-right" color="#a1a5ad" size="24"></u-icon></view>
					</view>
					<view class="news_list">
						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" v-for="(item, index) in newsList" :key="index" @click="godatil(item)">
							<view class="u-body-item-title">
								<view class="u-line-2">{{item.title}}</view>
								<view class="ms_list">
									<view></view>
									<view>{{item.publishTime}}</view>
								</view>
							</view>
							<view v-if="item.cover != null || item.cover != undefined">
								<image :src="imgurlhost + item.cover" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view @click="goRegister()" v-if="isReg" class="reginfo">
				<image src="../../static/tishi.png" style="height: 42rpx;width: 42rpx; margin-right: 5rpx;"></image>
				<text>新用户，请点击此处注册！</text><br/>
				<text style="font-size: 30rpx;">（仅限有装修客户资源的用户办理）</text>
			</view> -->
		</scroll-view>
	</view>
</template>

<script>
	var _self;
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import graceScroll from '@/graceUI/components/graceScroll.vue';
	import bwSwiper from '@/components/bw-swiper/bw-swiper.vue';
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'scene', 'openid'])
		},
		components: {
			graceScroll,
			bwSwiper
		},
		data() {
			return {
				isReg: false,
				elements: [{
						title: '平台介绍',
						name: 'about',
						image: '../../static/pt_icon01.png'
					},
					{
						title: '积分介绍',
						name: 'info',
						image: '../../static/pt_icon02.png'
					},
					{
						title: '个人信息',
						name: 'usercenter',
						image: '../../static/pt_icon03.png'
					},
					{
						title: '积分记录',
						name: 'jifenlist',
						image: '../../static/pt_icon04.png'
					}
				],
				elements1: [{
						title: '邀约用户',
						name: 'erweima',
						image: '../../static/zq_icon01.png'
					},
					{
						title: '提交客户',
						name: 'customerinfo',
						image: '../../static/zq_icon02.png'
					},
					{
						title: '下级用户',
						name: 'xiajiayonghu',
						image: '../../static/zq_icon03.png'
					},
					{
						title: '客户列表',
						name: 'customerlist',
						image: '../../static/zq_icon04.png'
					}
				],
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '图1'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '图2'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '图3'
					}
				],
				swiperList:[{img: '/static/banner/banner.png'},
							{img: '/static/banner/banner2.jpg'},
							{img: '/static/banner/banner3.jpg'},
							],
				screenHeight: 600,
				newsList: [],
				imgurlhost:'',
				page: {pagenum: 1,pagesize: 5}
			};
		},
		onShow() {
			if (this.hasLogin) {
				this.isReg = false;
			} else {
				this.isReg = true;
			}
		},
		onLoad(e) {
			this.getUpdate();
			_self = this;
			if (e.scene != null && e.scene != '') {
				_self.setScene(decodeURIComponent(e.scene));
			}
			if (this.openid != null) {
				return;
			}
			uni.showLoading({});
			uni.request({
				url: _self.serverUrl + 'app/getAsData',
				header: {
					"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
				},
				method: 'POST',
				data: {
				},
				success: (r) => {
					//console.log(r.data.data);
					if (r.data.code == 0) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								// console.log(loginRes);
								if (loginRes.code != undefined) {
									var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + r.data.data.appid + '&secret=' + r.data.data.secret +
										'&js_code=' +
										loginRes.code + '&grant_type=authorization_code';
									uni.request({
										url: _self.serverUrl + 'app/sendUrl',
										header: {
											"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
										},
										data: {
											url: url
										},
										method: 'POST',
										success(res) {
											//console.log(res.data);
											if (res.data.code == 0) {
												var openId = JSON.parse(res.data.data).openid;
												_self.sessionKey = JSON.parse(res.data.data).session_key;
												_self.setOpenid(openId);
												_self.findMemberByOpenId();
											}
										},
										complete(res) {
											uni.hideLoading();
										}
									});
								}
							}
						});
						try {
							const res = uni.getSystemInfoSync()
							this.screenHeight = res.screenHeight - 180;
							//console.log(this.screenHeight, "获取屏幕高度")
						} catch (e) {
							this.screenHeight = 600
						}
						this.$nextTick(()=>{
							// 获取新闻列表
							this.selectnewList(); 
						})
					}
				}
			})
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setScene']),
			getUpdate() {
				const updateManager = uni.getUpdateManager();
				updateManager.onCheckForUpdate(function(res) {
					// 请求完新版本信息的回调
					if (res.hasUpdate) {
						updateManager.onUpdateReady(function(res2) {
							uni.showModal({
								title: '更新提示',
								content: '发现新版本，是否重启应用?',
								success(res2) {
									if (res2.confirm) {
										// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
										updateManager.applyUpdate();
									}
								}
							});
						});
					}
				});
				updateManager.onUpdateFailed(function(res) {
					// 新的版本下载失败
					uni.showModal({
						title: '提示',
						content: '检查到有新版本，但下载失败，请检查网络设置',
						success(res) {
							if (res.confirm) {
								// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
								updateManager.applyUpdate();
							}
						}
					});
				});
			},
			goCalendar() {
				uni.navigateTo({
					url: '../ImportCalendar/ImportCalendar'
				})
			},
			findMemberByOpenId() {
				uni.request({
					url: this.serverUrl + 'app/getMemberByOpenId',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						openId: this.openid,
					},
					success: (r) => {
						//console.log(r);
						if (r.data.code == 0) {
							if (r.data.data != null) {
								this.isReg = false;
								this.login(r.data.data);
							} else {
								this.isReg = true;
							}
						}
					}
				})
			},
			search_news(value){
				uni.navigateTo({
				    url: '/newpage/newsLIst?type=3&search='+ JSON.stringify(value)
				});
			},
			goRegister() {
				uni.redirectTo({
					url: '/pageB/component/userinfo?scene=' + this.scene
				})
			},
			goAbout() {
				uni.navigateTo({
					url: '/pageB/component/about'
				})
			},
			goInfo() {
				uni.navigateTo({
					url: '/pageB/component/info'
				})
			},
			goqd() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pageB/ImportCalendar/ImportCalendar'
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "请先注册"
					})
				}
			},
			goNav(name) {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pageB/component/' + name
					})
				} else {
					uni.showToast({
						icon: "none",
						title: "请先注册"
					})
				}
			},
			selectnewList: function() {
				this.imgurlhost = this.serverUrl;
				uni.request({
					url: this.serverUrl + 'app/getNewsList',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: 'POST',
					data: {
						pageSize: this.page.pagesize,
						pageNum: this.page.pagenum
					},
					success: (r) => {
						if (r.data.code == 0) {
							this.newsList = r.data.data
						}
					}
				})
			},
			godatil:function(item){
				uni.navigateTo({
				    url: '/newpage/newdetail?id='+item.id
				});
			},
			golistnews:function(){
				let type = 3;
				uni.navigateTo({
					url: '/newpage/newsLIst?type='+JSON.stringify(type)
				});
			},
		}
	}
</script>

<style>
	.page {}

	.reginfo {
		text-align: center;
		z-index: 999;
		font-size: 36rpx;
		text-decoration: underline;
		font-weight: bold;
		color: #FF7256;
		margin: 20rpx 0;
	}

	.qdbt {
		position: absolute;
		margin-top: -170rpx;
		right: 30%;
		font-size: 34rpx;
		font-weight: bolder;
		z-index: 999;
		color: #ED1C24;
		background-color: #FFB301;
		padding: 10rpx 30rpx;
		border-radius: 10rpx;
	}

	.scrolldemo {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		background: #F5F6F8;
	}

	.scroll-icon {
		width: 60rpx;
		text-align: center;
		font-size: 32rpx;
		height: 60rpx;
		line-height: 60rpx;
		flex-shrink: 0;
		color: #3688FF;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0rpx 10rpx 20rpx 30rpx;
		background-color: #FFFFFF;
		height: 90rpx;
	}

	.wrap_l1 {
		flex: 1;
	}

	.wrap_l2 {
		width: 180rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.wrap_l2 text {
		font-size: 24rpx;
		color: #565656;
		padding-right: 10rpx;
	}

	.wrap-banner {
		padding: 0px 30rpx;
		/* margin-bottom: 30rpx; */
	}

	.wrap-banner image {
		width: 100%;
	}

	.row_card {
		padding: 0rpx 30rpx;
	}

	.row_title {
		font-size: 32rpx;
		font-weight: normal;
		color: #333333;
		margin-bottom: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.row_title .more{
		font-size: 24rpx;
		font-weight: normal;
		color: #a1a5ad;
	}

	.nav_icon {
		width: 88rpx;
		margin-bottom: 25rpx;
	}

	.more {
		font-size: 24rpx;
		color: #a1a5ad;
		display: flex;
		align-items: center;
	}

	.news_list {
		padding: 20rpx 0rpx;
	}

	.news_list .u-body-item {
		display: flex;
		font-size: 30rpx;
		color: #333;
		padding: 20rpx 10rpx;
		align-items: center;
		padding-top: 40rpx;
		margin-bottom: 20rpx;
	}
	.u-body-item-title{
		flex: 1;
	}

	.news_list .u-body-item image {
		width: 160rpx;
		flex: 0 0 160rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-left: 12rpx;
	}

	.news_list .u-line-2 {
		font-size: 30rpx;
		font-weight: normal;
		color: #333333;
		line-height: 34rpx;
		font-family: '黑体';
	}

	.ms_list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 15rpx;
		font-size: 23rpx;
		font-weight: normal;
		color: #a2a5ac;
	}
	.head_hr{
		border-bottom: 20rpx solid #eeeeee;
		margin-bottom: 20rpx;
	}
</style>
